<template>
  <div>
    <!-- {{JSON.parse(form)}} -->
    <div class="detail">
      <!-- {{likesData}} -->
      <!-- {{item}} -->
      <!-- {{itemId.time}} -->
      <header class="app-header">
        <div @click="back" class="backRoute">
          <i class="iconfont icon-arrow-left-bold"></i>
        </div>
        详情</header>
      <div :class="isCore">
        <div :class="isScroll" ref="scroll">
          <div class="detail-all">
            <h1 class="detail-title">
              {{itemId.title}}
            </h1>
            <i class="detail-info">
              by {{itemId.author}} - {{itemId.date}}
            </i>
            <div v-html="blog" class="detail-content markdown-body">
              <!-- {{itemId.content}} -->
            </div>
            <commentInfo/>
          </div>
        </div>
      </div>
      <footer class="detail-pl" v-if="!core">
        <div class="detail-icon-input">
          <i class="iconfont icon-editor"></i>
          <input class="detail-pl-input" placeholder="写评论..." @click="jumpText" value="" type="text">
        </div>
        <div class="detail-icon">
          <li>
            <i class="iconfont icon-comments"></i>
            <sup class="badge">12</sup>
          </li>
          <li @click="collection" ref="c">
            <i class="iconfont icon-collection"></i>
          </li>
          <li @click="likes" ref="a">
            <i class="iconfont icon-good"></i>
          </li>
          <li>
            <i class="iconfont icon-upload"></i>
          </li>

        </div>
      </footer>

      <footer class="detail-pl-info" v-else>
        <div></div>
        <div>
          <textarea v-model="comment" class="detail-textarea" v-focus placeholder="友善是交流的起点"></textarea>
        </div>
        <div class="detail-jl">
          <i class="iconfont icon-fullscreen-expand"></i>
          <div @click="issue" class="detail-issue">发布</div>
        </div>
      </footer>
      <div @click="jumpBack" class="dio" v-if="this.core"></div>
    </div>
  </div>

</template>

<script>
import commentInfo from '@/views/msbd/commentInfo.vue'
import "@/static/image/iconfont.css"
import { mapActions, mapState } from 'vuex'
import BScroll from '@better-scroll/core'
import marked from 'marked'
import { setHistoryData } from '@/static/local/setHistory.js'
export default {
  data () {
    return {
      comment: '',
      // items:{},
      // blog: marked(this.item.content)
      // blog: marked(this.itemId.content),
      blog: '',
      core: false,
      isCore: {
        corecontainer: true,
        corecontainer1: false
      },
      isScroll: {
        scrollwrapper: true,
        scrollwrapper1: false
      },
    }
  },
  // props: ['item'],
  // props: ['items'],
  computed: {
    ...mapState('msbd', ['list']),
    ...mapState('discuss', ['itemId', "discussList"]),
    ...mapState('login', ['form', 'likesData', 'total', 'collections', 'collect']),
    ...mapState('setting', ['historyData'])
  },
  components: {
    commentInfo
  },
  methods: {
    collection () {
      // console.log(this.form.id)
      // console.log(this.collect.includes(this.$route.params.id))
      let r = this.collect.map((i) => i.bdid)
      if (this.form.id && r.includes(this.$route.params.id * 1) == false) {
        this.postCollection({ uid: this.form.id, bdid: this.itemId.id })
        this.$refs.c.style.color = '#0099cc'   //deleteCollect
      }
      if (r.includes(this.$route.params.id * 1) == true) {
        this.deleteCollect({ uid: this.form.id, bdid: this.itemId.id })
        this.$refs.c.style.color = ''
      }
    },
    saveLikes () {
      // console.log(this.discussList[0].bdid)
      // console.log(this.$route.params.id)
      // this.likesData.map((i)=>{
      // console.log(this.likesData)
      // for (var i = 0; i < this.likesData.length; i++) {
      // if (this.$route.params.id == this.likesData[i].bdid && this.form.id == this.likesData[i].uid) {
      // this.$refs.a.style.color = '#0099CC'
      // console.log(this.$refs.a.style.color = '#0099cc')
      // }
      // console.log(this.likesData[i].id)
      // if (!!this.likesData.bdid && this.likesData.uid) {
      //   if (this.itemId.id == this.likesData.bdid && this.form.id == this.likesData.uid) {
      //     this.$refs.a.style.color = '#0099CC'
      //   }
      // }
      // console.log(this.form)
      // console.log(this.itemId)
      if (this.form.id && this.itemId.id) {
        if (this.likesData) {
          this.getLikesData({ bdid: this.$route.params.id })
          this.$refs.a.style.color = '#0099CC'
        }
      }
      // console.log(this.likesData)
      // })
    },
    likes () {
      if (this.form.id && this.itemId.id) {     //是否登录
        if (this.likesData) {
          this.delLikes({ uid: this.form.id, bdid: this.itemId.id })
          this.$refs.a.style.color = ''
        } else {
          this.postLikes({ uid: this.form.id, bdid: this.itemId.id })
          this.$refs.a.style.color = '#0099CC'
        }
        // if (!this.likesData) {
        //   this.postLikes({ uid: this.form.id, bdid: this.itemId.id })
        //   this.$refs.a.style.color = '#0099CC'
        // } else {
        //   this.delLikes({ uid: this.form.id, bdid: this.itemId.id })
        //   this.$refs.a.style.color = '#ccc'
        // }
        this.getLikesData({ bdid: this.$route.params.id })
      }
      // console.log(this.form.id)
      // console.log(this.itemId.id)
    },
    splic (d) {
      d.substring(5)
    },
    async issue () {
      if (this.comment.trim() == '') {
        console.log('空')
        return
      }
      await this.postDiscuss({ bdid: this.$route.params.id, content: this.comment })
      this.jumpBack()
      await this.getDiscuss({ bdid: this.$route.params.id })
      this.bs.refresh()
      this.$toast('评论成功', 1000, 70, 'icon-favorites')
    },
    ...mapActions('discuss', ['postDiscuss', 'getDiscuss', 'getItemId']),
    ...mapActions('setting', ['postHistory','getHistory','getMsbdByHistory']),
    ...mapActions('login', ['deleteCollect', 'postLikes', 'getLikesData', 'likeCount', 'delLikes', 'postCollection', 'getCollection', 'getMsbdByCollect']),
    back () {
      this.$router.back()
      // this.$parent.isDetail = false
      // console.log(this.$parent)
    },
    init () {
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: true
      })
      this.bs.on('scroll', ({ y }) => {
        // console.log('scrolling-')
      })
      this.bs.on('scrollEnd', () => {
        // console.log('scrollingEnd')
      })
    },
    jumpBack () {     //正常状态
      this.core = false
      this.isCore.corecontainer = true
      this.isCore.corecontainer1 = false
      this.isScroll.scrollwrapper = true
      this.isScroll.scrollwrapper1 = false
    },
    jumpText () {    //textarea状态
      this.core = true
      this.isCore.corecontainer = false
      this.isCore.corecontainer1 = true
      this.isScroll.scrollwrapper = false
      this.isScroll.scrollwrapper1 = true
    },
  },
  async mounted () {
    await this.getHistory()
    // console.log(this.historyData)
    let h = this.historyData.map((i) => i.bdid)
    // console.log(h)
    if (h.includes(this.$route.params.id * 1) == false) {
      await this.postHistory({ bdid: this.$route.params.id })
    }
    // console.log(this.itemId)
    // setHistoryData(this.itemId)
    // localStorage.setItem("history", JSON.stringify(this.itemId));
    // console.log(this.$route.params.id * 1)
    let r = this.collect.map((i) => i.bdid)
    if (this.form.id && r.includes(this.$route.params.id * 1) == true) {
      this.$refs.c.style.color = "#0099CC"
    }
    // console.log(this.collect)
    // console.log(r)

    await this.getMsbdByCollect({ uid: this.form.id })
    // console.log(this.collect)
    // let r=this.collect.map((i)=>i.bdid)
    // console.log(r)
    // console.log(r.includes(this.$route.params.id*1))

    await this.getCollection({ uid: this.form.id })
    // console.log(this.likesData)
    // if(this.$route.params.id){
    //   this.$refs.a.style.color='#0099cc'
    // }
    // console.log()

    await this.likeCount(this.$route.params.id)
    // console.log(this.$route.params.id*1)
    await this.saveLikes()
    await this.getLikesData({ bdid: this.$route.params.id })
    // this.getDiscuss()
    // console.log(this.discussList)
    // console.log(this.$route)
    // console.log(this.$route.params.id)
    // console.log(items)
    await this.getItemId(this.$route.params.id)
    await (this.blog = marked(this.itemId.content))
    await this.getDiscuss({ bdid: this.$route.params.id })

    this.init()
    this.bs.refresh()
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = 'https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css'
    document.head.appendChild(link)
  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<style scoped>
/*  滚动样式  */
.corecontainer .scrollwrapper {
  height: calc(100vh - 120px);
  overflow: hidden;
}

.corecontainer1 .scrollwrapper1 {
  height: calc(100vh - 180px);
  overflow: hidden;
}

.corecontainer .scrollwrapper .scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 10px;
  border-bottom: 1px solid #ccc;
  width: 88%;
  margin: auto;
}

/* 内容排版*/
.detail-title {
  font-size: 30px;
  text-align: center;
  font-weight: 500;
}

.detail-all {
  padding: 10px;
}

.detail-info {
  color: #999;
  display: block;
  text-align: right;
  padding: 10px;
}

.detail-content {
  border-top: 1px solid #ccc;
  font-size: 17px;
  padding: 10px;
}

.backRoute {
  position: absolute;
  left: 17px;
  width: 60px;
}

.iconfont {
  font-size: 28px;
}

.detail-pl {
  display: flex;
  flex-flow: row;
  height: 60px;
  background-color: white;
  position: relative;
  border-top: 1px solid #ccc;
}

.detail-pl-info {
  height: 120px;
  background-color: white;
  position: relative;
  border-top: 1px solid #ccc;
  z-index: 999;
}

.detail-pl-input {
  height: 30px;
  width: 90%;
  /* position: absolute; */
  left: 10px;
  bottom: 14px;
  border-radius: 100px;
  border: 0;
  outline: none;
  font-size: 20px;
  background-color: #ddd;
  text-indent: 40px;
  /* padding-left: 40px; */
  /* padding-right: 10px; */
}

.detail-pl-btn {
  width: 20%;
  height: 42px;
  position: absolute;
  right: 15px;
  bottom: 9px;
  border: 0;
  border-radius: 100px;
  outline: none;
  font-size: 18px;
}

.detail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: white;
}

.detail-icon {
  /* display: flex;
  justify-content: center;
  text-align: center; */
  width: 55%;
  float: right;
  position: inherit;
  top: 14px;
  width: 200px;
  /* padding: 10px; */
  display: flex;
}

.detail-icon li {
  flex-grow: 1;
  position: relative;
}

.badge {
  position: absolute;
  top: 0px;
  background-color: #0099cc;
  padding: 0 5px;
  border-radius: 200px;
  left: 15px;
  color: white;
}

.detail-icon-input {
  width: 40%;
  display: initial;
  position: inherit;
  left: 10px;
  top: 13px;
  flex: 1;
  /* padding: 10px; */
}

.detail-icon-input i {
  position: absolute;
  left: 9px;
}

.detail-textarea {
  width: 70%;
  height: 90px;
  position: absolute;
  top: 11px;
  left: 10px;
  background-color: #9999992e;
  font-size: 22px;
  outline: none;
  text-indent: 10px;
  border: none;
}

.detail-jl {
  position: absolute;
  right: 4%;
  top: 10px;
}

.detail-issue {
  position: relative;
  top: 35px;
  font-weight: bold;
  font-size: 19px;
  cursor: pointer;
}

.dio {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 998;
  background-color: black;
  opacity: 0.7;
}
</style>